<template>
  <!-- 头部div -->
  <div class="header">
    <!-- 头部容器 -->
    <div class="headerContainer center">
      <!-- 头部左侧部分 -->
      <div class="leftBox">
        <!-- 论坛名称 -->
        <router-link to="/">LytisJs</router-link>
      </div>
      <!-- 头部右侧部分 -->
      <div class="rightBox">
        <template>
          <router-link v-if="!username" to="/login" class="login"
            >登录/注册</router-link
          >
          <div class="avatarBox" v-else>
            <el-popover placement="bottom" width="200" trigger="hover">
              <div class="userBox">
                <!-- 头像 -->
                <div class="avatar">
                  <img :src="$url + avatar_url" alt="" />
                </div>
                <!-- 用户名 -->
                <div class="usernameBox">
                  {{ username }}
                </div>
                <!-- 访问主页 -->
                <div class="linkBox">
                  <router-link :to="'/user/' + user_id">
                    <i class="el-icon-s-custom"></i>
                    个人中心
                  </router-link>
                </div>

                <!-- 退出 -->
                <div class="linkBox" @click="quitLogin">
                  <span>
                    <i class="el-icon-circle-close"></i>
                    退出登录
                  </span>
                </div>
              </div>
              <template #reference>
                <img
                  class="beforeAva"
                  v-if="avatar_url"
                  :src="$url + avatar_url"
                />
              </template>
            </el-popover>
          </div>
        </template>
        <div class="createArticle" @click="toCreate">
          <i>创作</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      searchInput: '',
    };
  },
  methods: {
    quitLogin() {
      this.$store.commit('quitLogin');
    },
    toCreate() {
      if (this.$route.path == '/create') return;
      this.$router.push('/create');
    },
  },
  computed: {
    ...mapState(['username', 'topicNum', 'avatar_url', 'user_id']),
  },
};
</script>

<style scoped lang="less">
// 头部样式
.header {
  height: 50px;
  background-color: #444;
  min-width: 1000px;
  // 头部容器
  .headerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 80px;
    // 头部左侧
    .leftBox {
      display: flex;
      padding-left: 48px;
      a {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: whitesmoke;
        font-size: 25px;
        cursor: pointer;
      }
      .search {
        margin-top: 3px;
        margin-left: 10px;
        position: relative;
        .search_icon {
          position: absolute;
          top: 5px;
          left: 5px;
          opacity: 0.5;
        }
        input {
          height: 18px;
          border: none;
          font-size: 12px;
          padding: 3px 5px 3px 22px;
          border-radius: 15px;
          background-color: #666;
          outline: none;
          &:hover {
            background-color: #fff;
          }
          &:focus {
            background-color: #fff;
          }
        }
      }
    }
    .rightBox {
      display: flex;
      align-items: center;
      .login {
        color: #ccc;
        margin-right: 20px;
        &:hover {
          color: #eee;
        }
      }
      .avatarBox {
        margin-right: 20px;
        cursor: pointer;
      }
      .createArticle {
        display: block;
        min-width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        background: #fc5531;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}
.userBox {
  position: relative;
  .avatar {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    margin-left: -24px;
    top: -64px;
    cursor: pointer;
    img {
      border-radius: 50%;
      width: 100%;
    }
  }
  .usernameBox {
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #ccc;
  }
  .linkBox {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    a {
      font-size: 16px;
    }
    padding: 0 16px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
      background-color: #f0f0f5;
    }
  }
}
.beforeAva {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f3f3f3;
}
</style>
